<template>
  <div class="template-list">
    <el-input
        placeholder="请输入模板名称"
        v-model="tname"
        style="width: 200px; margin-bottom: 10px;"
    />
    <el-button
        size="small"
        type="primary"
        @click="handleSearch"
        style="margin-bottom: 10px;"
    >
      确认
    </el-button>
    <el-button
        size="small"
        type="danger"
        @click="resetSearch"
        style="margin-bottom: 10px;"
    >
      重置
    </el-button>
    <el-table :data="listData" style="width: 100%">
      <el-table-column prop="tname" label="名称" min-width="10"/>
      <el-table-column fixed="right" label="操作" width="200">
        <template #default="scope">
          <el-button
              size="small"
              type="primary"
              @click="useTemplate(scope.$index, scope.row)">
            使用模板
          </el-button>
          <el-button
              size="small"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script lang="ts">
import BaseTableP from "@/components/Base/base-table-p.vue";
import BaseDeleteBtn from "@/components/Base/base-delete-btn.vue";
import emitter from "@/utils/eventBus.ts";

interface ListItem {
  id: string;
  euid: string;
  heatNo: string;
  tname: string;
}

export default defineComponent({
  components: {BaseDeleteBtn, BaseTableP},
  setup() {
    let templateId = ref("");
    const { proxy } = getCurrentInstance();
    const listData = ref<ListItem[]>([]);

    const tname = ref("");

    // 使用模板
    let useTemplateFlag = ref(false)
    const useTemplate = async (index: number, row) => {
      useTemplateFlag.value = true
      templateId.value = row.id;
      emitter.emit('getExperimentInfoCline')
    };
    const handleDelete = async (index: number, row) => {
      console.log(index, row);
      const response = await proxy.$api.TemplateUrl['delete'](row.id);
      resetSearch()
    };

    const handleSearch = async () => {
      // 模拟调用后台接口获取所有模板数据
      const response = await proxy.$api.TemplateUrl['queryByName']({"heatNo": "C", "tname": tname.value});
      if (response && response.result !== null) {
        listData.value = response.result;
      }
    };

    const resetSearch = () => {
      tname.value = "";
      handleSearch();
    };

    // 在组件挂载后立即调用fetchData方法
    onMounted(async () => {
          handleSearch();
          // 使用模板段回调
          emitter.on('experimentInfoDataCline', (data) => {
            console.log(`使用模板段回调experimentInfoDataCline:`,data )
            if (useTemplateFlag.value) {
              useTemplateFlag.value = false
              handleExperimentStart(data)
            }
          })

          emitter.on('updateTemplateListCline', () => {
            tname.value = "";
            handleSearch();
          })
    });
    onUnmounted(() => {
      emitter.off('experimentInfoDataCline')
      emitter.off('updateTemplateListCline')
    })
    const handleExperimentStart = async (data) => {
      data.templateId = templateId.value;
      const response = await proxy.$api.ExperimentUrl['getByTemplateId'](data);
      if (response && response.result !== null) {
        emitter.emit('stepTableDataCline', response.result);
      } else {
        console.warn("No data received or result is null.");
      }
    }

    return {
      listData,
      tname,
      handleDelete,
      useTemplate,
      handleSearch,
      resetSearch,
    };
  },
});
</script>

<style scoped>
.template-list {
  padding: 1px;
  overflow: auto;
}
</style>
